<template>
  <CommonContainer title="提交信审结果">
    <el-form ref="resultForm" :model="form" label-width="120px" :rules="rules">
      <el-form-item label="信审批复结果:" prop="approval">
        <el-radio-group v-model="form.approval">
          <el-radio :label="7">全部通过</el-radio>
          <el-radio :label="8">部分通过</el-radio>
          <el-radio :label="9">拒绝</el-radio>
        </el-radio-group>
      </el-form-item>
      <div style="margin-bottom: 20px">
        <p class="quota">信审额度</p>
        <div class="table-title-wrap flex-row-center">
          <p class="statisticInfo">申请总台数: <span>{{ form.application }}</span></p>
          <p class="statisticInfo">通过总台数: <span>{{ form.pass }}</span></p>
          <p class="statisticInfo">拒绝总台数: <span>{{ form.refuse }}</span></p>
        </div>
        <el-table
            :data="resultCars"
            :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
          <el-table-column
              align="center"
              prop="vehicleManufacturers"
              label="车辆厂商"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="vehicleModel"
              label="车辆车型"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="vehicleStyle"
              label="车辆款型"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="carNo"
              label="车牌号"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="vehicleEnergyType"
              label="车辆能源类型"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="registrationNature"
              label="登记性质"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="applicationType"
              label="申请类型"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="leaseTerm"
              label="租赁期限(月)"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="rentPaymentMethod"
              label="租金支付方式"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="mileageLimit"
              label="里程限制（公里)"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="registeredCity"
              label="上牌城市"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="registrationFee"
              label="上牌费"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="insurancePremium"
              label="保险费"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="maintenancePremium"
              label="维保费"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="purchaseTax"
              label="购置税"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="vehicleAndVesselTax"
              label="车船税"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="installationCost"
              label="加装费用"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="otherExpenses"
              label="其他费用"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="irr"
              label="IRR（含牌照）"
              min-width="120">
            <template v-slot="{row}">
              <template v-if="row.irr">{{row.irr}}%</template>
              <template v-else>--</template>
            </template>
          </el-table-column>
          <el-table-column
              align="center"
              prop="margin"
              label="保证金"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="monthlyRent"
              label="月租金"
              min-width="120">
          </el-table-column>
          <el-table-column label="首期租金、比例" align="center" prop="firstInstallmentRent" min-width="150px" show-overflow-tooltip>
            <template v-slot="{row}">
              <template v-if="row.firstInstallmentRentalRatio">
                {{ row.firstInstallmentRent }} 、{{ row.firstInstallmentRentalRatio }}%
              </template>
              <template v-else>
                -- 、--
              </template>

            </template>
          </el-table-column>
          <el-table-column label="残值、比例" align="center" prop="totalApplicationNumber" min-width="120px" show-overflow-tooltip>
            <template v-slot="{row}">
              <template v-if="row.residualValueRatio">
                {{ row.residualValue }} 、 {{ row.residualValueRatio }}%
              </template>
              <template v-else>
                -- 、--
              </template>

            </template>
          </el-table-column>
          <el-table-column
              align="center"
              prop="suggestedPrice"
              label="厂商指导价"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="purchasePrice"
              label="新车采购单价"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="currentValuation"
              label="旧车当前估值"
              min-width="120">
          </el-table-column>

          <el-table-column
              align="center"
              label="通过台数"
              min-width="160"
              fixed="right"
          >
            <template v-slot="{row}">
              <el-form-item style="margin-top: 15px;width: 100%" label-width="0" prop="numberOfUnitsPassed" :rules="{
                                 required: true,
                                 message: '请填写通过台数',
                                 trigger: 'change',
                                 validator: (rule, value, callback) => validData(rule, row.numberOfUnitsPassed, callback)
                               }">
                <el-input-number :precision="0" :disabled="form.approval!=8" v-model="row.numberOfUnitsPassed" :min="0"
                                 :max="row.numberOfApplications" onkeyup="value=value.replace(/[^\d||/.]/g,'')"
                ></el-input-number>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
              align="center"
              prop="updateTime"
              label="拒绝台数"
              min-width="160"
              fixed="right"
          >
            <template v-slot="{row}">
              <el-input-number disabled v-model="row.rejectedUnits"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column
              align="center"
              prop="numberOfApplications"
              label="申请台数"
              min-width="120" fixed="right">
          </el-table-column>

        </el-table>
      </div>


      <el-form-item label="说明:" prop="remark">
        <el-input type="textarea" v-model="form.remark" placeholder="请输入说明"></el-input>
      </el-form-item>
      <el-form-item label="附件:" class="form-img" style="margin-top: 40px">
        <image-common :up-type="2" info="上传附件" :limit="20" v-model="form.annex"></image-common>
      </el-form-item>
    </el-form>
  </CommonContainer>
</template>

<script>
import {submitCreditReviewResults, submitSuggestions} from '@/api/letterReview/letterReview'

export default {
  components: {},
  props: {
    results: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    // 这里存放数据
    return {
      form: {
        id: this.$route.query.id,
        approval: this.$route.query.approval ?? 7,
        application: 0,
        pass: 0,
        refuse: 0,
        remark: null,
        annex: null,
        cars: []

      },
      cars: [],
      rules: {
        approval: [
          {required: true, message: '请选择信审批复建议', trigger: 'change'},
        ]
      }
    }
  },
  computed: {
    resultCars() {
      let cars = this.cars;
      let pass = 0;
      if (cars.length > 0) {
        cars = cars.map((item) => {
          item.rejectedUnits = item.numberOfApplications - (item.numberOfUnitsPassed||0)
          pass += (item.numberOfUnitsPassed||0)
          return item
        })
      }
      this.form.pass = pass;
      this.form.refuse = this.form.application - this.form.pass
      return cars;
    }
  },
  watch: {
    'form.approval': {
      handler(value) {
        // 总台数
        this.$nextTick(() => {
          let total = 0
          if (this.cars.length > 0) {
            this.cars = this.cars.map((item) => {
              total += Number(item.numberOfApplications)
              if (value == 7) {//全部通过
                item.numberOfUnitsPassed = item.numberOfApplications
                item.rejectedUnits = 0
              } else if (value == 8) {//部分通过
                item.rejectedUnits = item.numberOfApplications
                item.numberOfUnitsPassed = 0
              } else if (value == 9) {//全部拒绝
                item.numberOfUnitsPassed = 0
                item.rejectedUnits = item.numberOfApplications
              }
              return item
            })
            this.form.application = total
            if (value == 7) {//全部通过
              this.form.pass = total
              this.form.refuse = 0
            } else if (value == 8) {//部分通过
              this.form.pass = 0
              this.form.refuse = total
            } else if (value == 9) {//全部拒绝
              this.form.pass = 0
              this.form.refuse = total
            }
          }
        })
      },
      immediate: true,
      deep: true
    },

  },
  // 方法集合
  methods: {
    saveSubmit() {
      let flag = false
      this.$refs['resultForm'].validate((valid) => {
        flag = valid;
      })

      if(this.form.approval<9&&this.form.pass<=0){
        this.$modal.msgError("通过台数不能为0!");
        return;
      }

      if(this.form.approval==8&&this.form.pass>=this.form.application){
        this.$modal.msgError("部分通过时，通过台数必须小于申请台数");
        return;
      }
      if (flag) {
        this.form.cars = this.resultCars.map((item) => {
          const obj = {
            vehicleStyleNo: item.vehicleStyleNo,
            numberOfApplications: item.numberOfApplications,
            numberOfUnitsPassed: item.numberOfUnitsPassed,
            rejectedUnits: item.rejectedUnits,
            id: item.id
          }
          return obj
        })
        return this.form;
      } else {
        return null
      }

    },
    validData(rule, value, callback) {
      if (rule.required && value != 0 && !value) {
        callback(new Error(rule.message));
      } else {
        callback();
      }
    },

  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  created() {
    this.cars = this.results.cars;
  },

}
</script>

<style lang="scss" scoped>
.statisticInfo {
  color: #464646;
  font-size: 14px;
  margin-right: 10px;

  span {
    color: #1884FF;
  }
}

.rightInfo {
  font-size: 14px;
  color: #1890FF;
}

.quota {
  font-size: 14px;
  font-weight: bold;
  color: #606266;
  position: relative;
  left: 12px;

  &::before {
    content: '*';
    color: red;
    margin-right: 5px;
  }
}
</style>
